<template>
  <div class="c-compoents">
    <v-card class="mx-auto" max-width="344" variant="outlined">
      <v-card-item>
        <div style="padding: 10px">
          <div class="text-overline mb-1">普通组件导入</div>
          <div class="text-h6 mb-1"><cain></cain></div>
          <div class="text-caption">
            在 component 中定义好组件名称, nuxt做好了自动化的导入，所以直接使用
          </div>
        </div>
      </v-card-item>

      <v-card-actions>
        <v-btn variant="outlined"> Button </v-btn>
      </v-card-actions>
    </v-card>
    <v-card class="mx-auto" max-width="344" variant="outlined">
      <v-card-item>
        <div style="padding: 10px">
          <div class="text-overline mb-1">动态组件导入</div>
          <div class="text-h6 mb-1">
            <component :is="clickable ? cain : 'div'"></component>
          </div>
          <div class="text-caption">
            基于is的动态组件，可根据resolveComponent引入组件
          </div>
        </div>
      </v-card-item>

      <v-card-actions>
        <v-btn variant="outlined" @click="clickable = !clickable"> 切换 </v-btn>
      </v-card-actions>
    </v-card>
    <v-card class="mx-auto" max-width="344" variant="outlined">
      <v-card-item>
        <div style="padding: 10px">
          <div class="text-overline mb-1">动态导入</div>
          <div class="text-h6 mb-1">
            <Lazycain v-if="Lazyshow" />
          </div>
          <div class="text-caption">
            要动态导入组件（也称为延迟加载组件，只需要在组件前缀上加上Lazy
          </div>
        </div>
      </v-card-item>

      <v-card-actions>
        <v-btn variant="outlined" @click="Lazyshow = !Lazyshow"> 导入 </v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script setup lang="ts">
const clickable = ref<boolean>(true);
const Lazyshow = ref<boolean>(false);
const cain = resolveComponent("cain");
</script>

<style lang="scss">
.c-compoents {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
</style>
